<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 清除默认样式 */
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      ol {
        list-style: none;
      }
      .lunbo {
        position: relative;
        width: 880px;
        height: 550px;
        border: 1px solid #333;
        margin: 20px auto;
      }
      .lunbo .pic li {
        position: absolute;
        left: 0;
        top: 0;
        width: 880px;
        height: 550px;
        display: none;
      }
      .lunbo .pic .current {
        display: block;
      }
      /* 按钮 */
      .lunbo .btn a {
        position: absolute;
        top: 50%;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        background-color: rgba(255, 255, 255, 0.3);
        font: 20px/40px "宋体";
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
      }
      .lunbo .btn .leftbtn {
        left: 20px;
      }
      .lunbo .btn .rightbtn {
        right: 20px;
      }
      .lunbo .btn a:hover {
        background-color: rgba(255, 255, 255, 0.6);
      }
      /* 下标 */
      .lunbo .sub {
        position: absolute;
        left: 100px;
        bottom: 50px;
        width: 240px;
      }
      .lunbo .sub li {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 20px;
        background-color: rgba(255, 255, 255, 0.4);
        font: 12px/20px "微软雅黑";
        text-align: center;
        color: #666;
        cursor: pointer;
      }
      .lunbo .sub .current {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <script src="common.js"></script>

    <!-- 轮播图大结构 -->
    <div class="lunbo">
      <!-- 图片部分 -->
      <ul class="pic" id="pic">
        <li class="current"><img src="images/lunbo/c1.jpg" /></li>
        <li><img src="images/lunbo/c2.jpg" /></li>
        <li><img src="images/lunbo/c3.jpg" /></li>
        <li><img src="images/lunbo/c4.jpg" /></li>
        <li><img src="images/lunbo/c5.jpg" /></li>
        <li><img src="images/lunbo/c6.jpg" /></li>
      </ul>
      <!-- 按钮 -->
      <div class="btn" id="btn">
        <a href="javascript:;" class="leftbtn" id="leftbtn">&lt;</a>
        <a href="javascript:;" class="rightbtn" id="rightbtn">&gt;</a>
      </div>
      <!-- 小圆点 -->
      <ol class="sub" id="sub">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ol>
    </div>
    <script>
      var pic = my$("pic");
      var sub = my$("sub");
      var leftbtn = my$("leftbtn");
      var rightbtn = my$("rightbtn");
      var pichild = pic.children;
      var subchild = sub.children;
      console.log(pichild);
      //初始化信号量now
      var now = 0;

      //1.轮播图定时器
      var timer = setInterval(defaults, 1000);

      rightbtn.onclick = rightHandle;
      leftbtn.onclick = leftHandle;
      //2.鼠标移到轮播图
      pic.onmouseover = function () {
        clearInterval(timer);
      };
      //3.鼠标移出轮播图
      pic.onmouseout = function () {
        timer = setInterval(defaults, 1000);
      };

      //A.defaults默认自动轮播
      function defaults() {
        // 信号量自加
        now++;
        // 判断 idx 是否是超过最大的下标，如果是，就相当于从最后一张要切换到第一张
        if (now > pichild.length - 1) {
          now = 0;
        }
        // 调用一个切换函数
        change();
      }

      //B.定义右按钮事件函数
      function rightHandle() {
        clearInterval(timer);

        // 信号量自加
        now++;
        // 判断 idx 是否是超过最大的下标，如果是，就相当于从最后一张要切换到第一张
        if (now > pichild.length - 1) {
          now = 0;
        }
        // 调用一个切换函数
        change();
      }
      //C.定义左按钮事件函数
      function leftHandle() {
        clearInterval(timer);
        // 信号量自加
        now--;
        // 判断 idx 是否是超过最大的下标，如果是，就相当于从最后一张要切换到第一张
        if (now < 0) {
          now = pichild.length - 1;
        }
        // 调用一个切换函数
        change();
      }

      //D.排他
      function change() {
        for (var i = 0; i < pichild.length; i++) {
          pichild[i].className = "";
          subchild[i].className = "";
        }
        pichild[now].className = "current";
        subchild[now].className = "current";
      }
    </script>
  </body>
</html>
